<template>
    <div class="mac-window">
        <div class="title-bar">
            <div class="buttons">
                <span class="button close"></span>
                <span class="button minimize"></span>
                <span class="button zoom"></span>
            </div>
            <h1>&nbsp;&nbsp;&nbsp;&nbsp;HikerSystem</h1>
        </div>
        <div style="display: flex;">
          <div class="scrollable-sidebar">
            
            <br/>
            <p style="margin: 20px 3px 15px 3px;" >
                <router-link :to="'/home?UID=' + this.$route.query.UID" class="a"><img src="..\assets\backspace.png" width="12" height="12"/>返回主页</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/create_team?UID=' + this.$route.query.UID" class="a"><img src="..\assets\mine.png" width="12" height="12"/>创建队伍</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/join_team?UID=' + this.$route.query.UID" class="a"><img src="..\assets\new.png" width="12" height="12"/>加入队伍</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex;  background-color: gray; border-radius: 0;" >
                <router-link :to="'/application?UID=' + this.$route.query.UID" class="a" style="color:aliceblue"><img src="..\assets\documents.png" width="12" height="12"/>管理申请</router-link>
            </p>
            <p style="margin: 20px 3px 15px 3px; display: flex" >
                <router-link :to="'/account?UID=' + this.$route.query.UID" class="a"><img src="..\assets\documents.png" width="12" height="12"/>我的信息</router-link>
            </p>
            
          </div>
          

    

          <div class="main-sidebar" style="display: inline-block;">

          <br/><img src="..\assets\shenqingliebiao.png" width=90 />
                    <div  v-for="item in requireList" :key="item.user.id">
                        <button style="width: 50vw;" onclick="this.style.display='none'" @click="approve(item.id)">{{ item.id }} : {{ item.user.username }}请求加入{{ item.team.name }}</button>
          <!--  <form @submit.prevent="handleSubmit">
                


                <div>
      <p v-if="selectedUserIds.length === 0">没有选中的请求</p>
        <p v-for="id in selectedUserIds" :key="id">{{ id }}</p>
    </div>

                    <button type="submit">确认同意以上申请</button>
            </form>-->
          </div>
        </div>
    </div>
    </div>
</template>




<script>
const IP = 'http://47.113.197.249:8083';
import { ref, computed } from 'vue';
import axios from 'axios';
import '../assets/mac.css';
import { useRoute } from 'vue-router';
 const groupedItems = computed(() => {
  return state.items.reduce((accumulator, currentItem) => {
    const category = currentItem.category;
    if (!accumulator[category]) {
      accumulator[category] = [];
    }
    accumulator[category].push(currentItem);
    return accumulator;
  }, {});
});

export default {
  name: 'CreateTeam',
  

  created() {
    const route = useRoute();
    const idData = {
        id: route.query.UID,
    }
    console.log(idData);
    axios.post(IP + '/user/applicationList', idData)
        .then(response => {
          this.requireList = response.data.data;
          console.log(this.requireList);
        })
        .catch(error => {
          console.log('发送出错：', error);
          alert('连接失败！请检查网络');
        });
  },
 

  setup() {
    const maxcount = ref('');
    const hobby = ref('');
    const purpose = ref('');
    const details = ref('');
    const selectedUserIds = ref([]);



/************************************************************************* */
    const handleSubmit = () => {

        const UID = {
            id: route.query.UID,
        };
        for (let i = 0; i < selectedUserIds.value.length; i++){
        
        const team = {
            id: selectedUserIds.value[i],
        };
        
      const totalData = {
        user: UID,
        teamMember: team,
      }
      console.log('Team Data', totalData);
      axios.post(IP + '/user/approveTeamMember', totalData)
        .then(response => {
          console.log('操作成功！');
        })
        .catch(error => {
          console.log('发送出错：', error);
          alert('连接失败！请检查网络');
        });

    }
    };
/***************************************************************************** */
    return {
      maxcount,
      hobby,
      purpose,
      details,
      handleSubmit,
      selectedUserIds,
      groupedItems,
    }
  },
  
  data() {
    return {
      groupedItems:[],
      requireList: [],
      selectedUserIds: []
    }
  },


  methods: {
    handleCheckboxChange() {
      console.log(this.selectedUserIds);
    },

    
    approve(id){
        const UID = {
            id: this.$route.query.UID,
        };
        const team = {
            id: id,
        };
      const totalData = {
        user: UID,
        teamMember: team,
      }
      console.log('Team Data', totalData);
      axios.post(IP + '/user/approveTeamMember', totalData)
        .then(response => {
          alert(response.data.msg);
          console.log(response);
        })
        .catch(error => {
          console.log('发送出错：', error);
        });
    }
  }
  
};
</script>

<style>
body {
    margin: 0;
    padding: 0;
    font-family: 'San Francisco', 'Helvetica Neue', Arial, sans-serif;
    background-color: #F9F9F9;
}


p {
    border: 0;
}






</style>